<form name="form" ng-init="vm.init();refresh(vm.callback);" novalidate>
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <button class="btn btn-default" type="button" ng-disabled="form.$invalid"
          ng-click="vm.format(form.$valid)"><i class="fa fa-code"></i> 格式化</button>
      <button class="btn btn-default" type="button" ng-click="vm.showConfig = !vm.showConfig">
        <i class="fa fa-cog"></i> 配置项</button>
      <button id="copy" class="btn btn-default" type="button" ng-disabled="vm.code == ''">
        <i class="fa fa-copy"></i> 复制</button>
      <button class="btn btn-default" type="button" ng-click="vm.reset()">
        <i class="fa fa-repeat"></i> 重置</button>
    </div>
  </script>
  <div class="row x-view-body">
    <div class="x-view-line" ng-class="{'col-md-2': vm.showConfig, 'hidden': !vm.showConfig}">
      <div class="x-view-scope">
        <label class="control-label">全局</label>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">数据类型</span>
            <select class="form-control" ng-model="vm.dataType"
                ng-options="dataType as dataType.label for dataType in vm.dataTypes">
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">打印线宽度</span>
            <input type="number" min="0" class="form-control" ng-model="vm.config.printWidth">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">Tab宽度</span>
            <input type="number" min="0" class="form-control" ng-model="vm.config.tabWidth">
          </div>
        </div>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.useTabs">使用Tab键
          </label>
        </div>
        <label class="control-label">共通</label>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.singleQuote">使用单引号
          </label>
        </div>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.bracketSpacing">保留括号两端空格
          </label>
        </div>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">文本换行</span>
            <select class="form-control" ng-model="vm.config.proseWrap">
              <option value="always">Always</option>
              <option value="never">Never</option>
              <option value="preserve">Preserve</option>
            </select>
          </div>
        </div>
        <label class="control-label">JavaScript</label>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.semi">包含分号
          </label>
        </div>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.jsxSingleQuote">JSX中使用单引号
          </label>
        </div>
        <div class="form-group">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="vm.config.jsxBracketSameLine">JSX中括号在同一行
          </label>
        </div>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">允许括号</span>
            <select class="form-control" ng-model="vm.config.arrowParens">
              <option value="avoid">Avoid</option>
              <option value="always">Always</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">末尾逗号</span>
            <select class="form-control" ng-model="vm.config.trailingComma">
              <option value="none">None</option>
              <option value="es5">ES5</option>
              <option value="all">All</option>
            </select>
          </div>
        </div>
        <label class="control-label">HTML</label>
        <div class="form-group">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">HTML空白敏感度</span>
            <select class="form-control" ng-model="vm.config.htmlWhitespaceSensitivity">
              <option value="css">CSS</option>
              <option value="strict">Strict</option>
              <option value="ignore">Ignore</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="x-view-line" ng-class="{'col-md-5': vm.showConfig, 'col-md-6': !vm.showConfig}">
      <div class="x-view-scope">
        <textarea class="form-control" name="data" ng-model="vm.data" placeholder="源数据" required autofocus
            ng-class="{'x-invalid': form.$submitted && form.data.$invalid}"></textarea>
      </div>
    </div>
    <div ng-class="{'col-md-5': vm.showConfig, 'col-md-6': !vm.showConfig}">
      <div class="x-view-scope">
        <div class="x-editor" ng-show="vm.error == ''" ng-class="{'x-full-screen x-frame': vm.fullScreen}">
          <pre class="x-output" id="data-editor"></pre>
        </div>
        <pre class="alert alert-danger" ng-if="vm.error">{{vm.error}}</pre>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="editor-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleAutowrap()" title="自动换行">
          <i class="fa" ng-class="{'fa-toggle-on': vm.autowrap, 'fa-toggle-off': !vm.autowrap}"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleFoldall()"
            title="{{vm.collapsed ? '全部展开' : '全部折叠'}}">
          <i class="fa" ng-class="{'fa-plus-square-o': vm.collapsed, 'fa-minus-square-o': !vm.collapsed}"></i>
        </button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.showSearchbox()" title="查找">
          <i class="fa fa-search"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.fullScreen = !vm.fullScreen"
            title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i>
        </button>
      </div>
    </div>
  </script>
</form>
